<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Transition 时钟案例</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: black;
}
/* 表盘 */
div{
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    margin: 100px auto;
    cursor: pointer;
   
}
/* 旋转 */
div:hover::after{
    transform: rotate(1turn);
}
/* 表中心 */
div::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: black;
    left: calc(50% - (10px / 2 ));
    top: calc(50% - (10px / 2 ));
    border-radius: 50%
}
/* 指针 */
div::after{
    transition: all 60s steps(60);
    /* 元素旋转的中心位置 */
    transform-origin: bottom;
    content: "";
    position: absolute;
    width: 2px;
    height: 80px;
    background-color: black;
    left: calc(50% - (2px / 2));
    top: calc((200px / 2 ) - 80px);
}
</style>
<body>
    <div>

    </div>
</body>
</html>